<template>
	<view class="page">
		<view class="site flex-align">
			<image class="cancel-btn" src="../../../static/cancel-btn.png" mode=""></image>
			<u--text class="siteutext" text="筛选" color="#2C2C2C" size="36rpx"></u--text>
		</view>
		<u--text class="age" text="年龄" color="#2C2C2C" size="28rpx"></u--text>
		<view class="ageSlider">
			<view class="ageNoLimit flex-between flex-align">
				<u--text text="16" color="#6D6D6D" size="28rpx"></u--text>
				<u--text text="不限" color="#6D6D6D" size="28rpx"></u--text>
			</view>
			<u-slider v-model="value"></u-slider>
		</view>
		<u--text class="age" text="专业" color="#2C2C2C" size="28rpx"></u--text>
		<view class="major flex-between" @click="btnActive">
			<u-button data-index="1" :class="{btnActive: btnactive[0].checked}" text="全部"></u-button>
			<u-button data-index="2" :class="{btnActive: btnactive[1].checked}" text="工商管理类"></u-button>
			<u-button data-index="3" :class="{btnActive: btnactive[2].checked}" text="电子信息化"></u-button>
			<u-button data-index="4" :class="{btnActive: btnactive[3].checked}" text="计算机类"></u-button>
			<u-button data-index="5" :class="{btnActive: btnactive[4].checked}" text="自动化类"></u-button>
			<u-button data-index="6" :class="{btnActive: btnactive[5].checked}" text="设计学类"></u-button>
		</view>
		<u--text class="age" text="活跃度" color="#2C2C2C" size="28rpx"></u--text>
		<view class="major flex-between" @click="btnActive">
			<u-button data-index="7" :class="{btnActive: btnactive[6].checked}" text="全部"></u-button>
			<u-button data-index="8" :class="{btnActive: btnactive[7].checked}" text="刚刚活跃"></u-button>
			<u-button data-index="9" :class="{btnActive: btnactive[8].checked}" text="今日活跃"></u-button>
			<u-button data-index="10" :class="{btnActive: btnactive[9].checked}" text="3日内活跃"></u-button>
			<u-button data-index="11" :class="{btnActive: btnactive[10].checked}" text="本周活跃"></u-button>
			<u-button data-index="12" :class="{btnActive: btnactive[11].checked}" text="本月活跃"></u-button>
		</view>
		<u--text class="age" text="性别" color="#2C2C2C" size="28rpx"></u--text>
		<view class="major flex-between" @click="btnActive">
			<u-button data-index="13" :class="{btnActive: btnactive[12].checked}" text="不限"></u-button>
			<u-button data-index="14" :class="{btnActive: btnactive[13].checked}" text="男"></u-button>
			<u-button data-index="15" :class="{btnActive: btnactive[14].checked}" text="女"></u-button>
		</view>
		<u--text class="age" text="近期浏览" color="#2C2C2C" size="28rpx"></u--text>
		<view class="major flex" @click="btnActive">
			<u-button data-index="16" :class="{btnActive: btnactive[15].checked}" text="不限"></u-button>
			<u-button data-index="17" :class="{btnActive: btnactive[16].checked}" text="近七天未浏览过"></u-button>
		</view>
		<u--text class="age" text="院校" color="#2C2C2C" size="28rpx"></u--text>
		<view class="major flex-between" @click="btnActive">
			<u-button data-index="18" :class="{btnActive: btnactive[17].checked}" text="全部"></u-button>
			<u-button data-index="19" :class="{btnActive: btnactive[18].checked}" text="985"></u-button>
			<u-button data-index="20" :class="{btnActive: btnactive[19].checked}" text="211"></u-button>
			<u-button data-index="21" :class="{btnActive: btnactive[20].checked}" text="双一流"></u-button>
			<u-button data-index="22" :class="{btnActive: btnactive[21].checked}" text="留学"></u-button>
			<u-button data-index="23" :class="{btnActive: btnactive[22].checked}" text="国内外名校"></u-button>
			<u-button data-index="24" :class="{btnActive: btnactive[23].checked}" text="公办"></u-button>
		</view>
		<view class="cleanUp flex-align">
			<u-button text="清除"></u-button>
			<u-button type="primary" text="确定"></u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value: 30,
				btnactive: [{
						index: '1',
						checked: false
					},
					{
						index: '2',
						checked: false
					},
					{
						index: '3',
						checked: false
					},
					{
						index: '4',
						checked: false
					},
					{
						index: '5',
						checked: false
					},
					{
						index: '6',
						checked: false
					},
					{
						index: '7',
						checked: false
					},
					{
						index: '8',
						checked: false
					},
					{
						index: '9',
						checked: false
					},
					{
						index: '10',
						checked: false
					},
					{
						index: '11',
						checked: false
					},
					{
						index: '12',
						checked: false
					},
					{
						index: '13',
						checked: false
					},
					{
						index: '14',
						checked: false
					},
					{
						index: '15',
						checked: false
					},

					{
						index: '16',
						checked: false
					},
					{
						index: '17',
						checked: false
					},
					{
						index: '18',
						checked: false
					},
					{
						index: '19',
						checked: false
					},
					{
						index: '20',
						checked: false
					},
					{
						index: '21',
						checked: false
					},
					{
						index: '22',
						checked: false
					},
					{
						index: '23',
						checked: false
					},
					{
						index: '24',
						checked: false
					},
				],
				btnac: '',
				btnindex: ''
			}
		},
		methods: {
			btnActive(event) {
				console.log(typeof(this.btnactive), event)
				this.btnindex = event.target.dataset.index
				for (var key in this.btnactive) {
					if (key == (this.btnindex - 1)) {
						this.btnactive[key].checked = !this.btnactive[key].checked
					}
				}
			}
		}
	}
</script>

<style>
	.page {
		background-color: #ffffff;
		height: 100%;
	}

	.site {
		padding: 30rpx 60rpx 26rpx 44rpx;
		background-color: #ffffff;
	}

	.siteutext {
		flex-direction: column;
	}

	.cancel-btn {
		width: 32rpx;
		height: 32rpx;
	}

	::v-deep .age {
		margin: 32rpx 16rpx 0rpx 30rpx !important;
	}

	.ageSlider {
		margin: 16rpx 28rpx 46rpx 30rpx;
	}

	.ageNoLimit .u-text {
		flex: 0;
		white-space: nowrap;
	}

	::v-deep .ageSlider uni-slider {
		margin: 6rpx 0rpx;
	}

	.major {
		flex-wrap: wrap;
		row-gap: 22rpx;
		margin-top: 34rpx;
		margin-bottom: 50rpx;
		padding: 0rpx 42rpx;
		column-gap: 32rpx;
	}

	.u-button:after {
		content: none;
	}

	.major .u-button {
		width: 200rpx;
		height: 60rpx;
		color: #6D6D6D;
		background-color: #EFEFEF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		margin: 0;
	}

	::v-deep .u-button span {
		font-size: 24rpx;
	}

	.btnActive {
		border: 2rpx solid #1872FF;
		background-color: #D8D8D8 !important;
		color: #2C2C2C !important;
	}

	.cleanUp {
		width: 100%;
		position: fixed;
		bottom: 0;
		left: 0;
		background-color: #ffffff;
		padding: 26rpx 0rpx 20rpx 0rpx;
		column-gap: 38rpx;
		box-shadow: 0rpx -8rpx 16rpx 0rpx rgba(208, 208, 208, 0.3);
	}

	.cleanUp .u-button:after {
		content: none;
	}

	.cleanUp .u-button:nth-child(1) {
		margin-left: 22rpx;
		width: 240rpx;
		height: 92rpx;
		background-color: #D8D8D8;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		color: #6D6D6D;
	}

	.cleanUp .u-button:nth-child(2) {
		margin-right: 20rpx;
		width: 420rpx;
		height: 92rpx;
		background: #429CFD;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		font-size: 36rpx;
		color: #FFFFFF;
	}

	::v-deep .cleanUp .u-button span {
		font-size: 32rpx;
	}
</style>